<template>
	<view class="about" :style="{paddingTop: safeArea_top + 'px'}">
		<view class="head">
			<view class="back" @click="back">
				<uni-icons type="arrow-left" size="30"></uni-icons>
			</view>
			<view class="title">
				关于我们
			</view>
			<view></view>
		</view>
		
		<view class="logo">
			<view class="content">
				<view class="icon">
					<image src="../../static/512.png" style="width: 100px;height: 100px;"></image>
				</view>
				<view class="name">
					{{name}}
				</view>
				<view class="version">
					当前版本 v{{version}}
				</view>
			</view>
		</view>
		
		<view class="container">
			<view class="item" @click="toPath('gongyue')">
				<view class="name">上门按摩服务行业平台公约</view>
				<view class="arrow-right"><uni-icons type="right" size="18"></uni-icons></view>
			</view>
			<view class="item" @click="toPath('service')">
				<view class="name">软件许可使用协议</view>
				<view class="arrow-right"><uni-icons type="right" size="18"></uni-icons></view>
			</view>
			<view class="item" @click="toPath('privacy')">
				<view class="name">隐私政策</view>
				<view class="arrow-right"><uni-icons type="right" size="18"></uni-icons></view>
			</view>
			<view class="item" @click="toPath('business')">
				<view class="name">公司资质</view>
				<view class="arrow-right"><uni-icons type="right" size="18"></uni-icons></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
			   safeArea_top: '',
			   name: '',
			   version: ''
			}
		},
		onLoad() {
		   const info = uni.getSystemInfoSync();
		   const safeArea = uni.getStorageSync("safeArea");
		   this.safeArea_top = safeArea.top + 15;
		   
		   this.version = info.appVersion
		   this.name = info.appName
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			toPath(key){
				if(key === 'business'){
					uni.navigateTo({
						url: "/pages/my/business"
					})
				}else{
					uni.navigateTo({
					    url: "/bundle/pages/web/web?title=" + key
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.about{
		background-color: #f5f6f8;
		.head{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.back{
				position: absolute;
				left: 30rpx;
			}
			.title{
				font-size: 32rpx;
				font-weight: 500;
			}
		}
		.logo{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.content{
				padding: 120rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				.name{
					margin-top: 30rpx;
				}
				.version{
					margin-top: 10rpx;
					color: #898a8c;
					font-size: 24rpx;
				}
			}
		}
		.container{
			margin: 40rpx;
			padding: 20rpx;
			border-radius: 18rpx;
			background-color: #fff;
			.item{
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f5f6f8;
			}
			.item:last-child {
			    border-bottom: none;
			}
		}
	}
</style>